<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>API测试平台</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrapValidator.min.css" rel="stylesheet">
    <link href="/static/css/font-awesome.css" rel="stylesheet"/>
    <style>
        form {margin-top: 30px}
        form * {margin-bottom: 20px}
        body {background-image: url("/static/img/login_bg.jpg"); background-size:cover }
    </style>
</head>
<body>
    <div class="container" style="margin-top: 80px">
        <div class="row">
            <div style="background-color: white;border-radius:5px" class="col-lg-push-3 col-md-push-3 col-sm-push-3 col-lg-5 col-sm-5 col-md-5">
                <form id="login" action="/API/login" method="post">
                   <h2 class="text-center">
                      <img src="/static/img/logo_wetest_gaitubao_126x50.jpg">
                   </h2>
                   <h3 class="text-center" style="margin-bottom: 40px"> API 测 试 平 台 </h3>
                   <div class="form-group">
                      <div class="input-group">
                         <span class="input-group-addon"><i style="margin: auto" class="fa fa-user-o fa-fw"></i></span>
                         <input type="text" class="form-control input-lg" id="uname" name="username" placeholder="用户名" required>
                      </div>
                   </div>
                   <div class="form-group">
                       <div class="input-group">
                          <span class="input-group-addon"><i style="margin: auto" class="fa fa-lock fa-fw"></i></span>
                          <input type="password" class="form-control input-lg" id="pwd" name="password" placeholder="密码">
                       </div>
                   </div>
                   <div class="checkbox">
                      <label>
                         <input type="checkbox" name="remind"> 记住我
                      </label>
                   </div>
                   <div class="form-group">
                      <button style="height: 200%" type="submit" class="form-control btn btn-primary btn-lg">登录</button>
                   </div>
                   <hr color="	#F0F8FF" style="height: 1px"/>
                   <div class="form-group">
                       <a href="/signin" class="form-control btn btn-default btn-lg" style="height: 200%">注册新用户</a>
                   </div>
                </form>
            </div>
        </div>
    </div>

    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrapValidator.min.js" type="text/javascript"></script>
    <script src="/static/js/zh_CN.js" type="text/javascript"></script>
    <script src="/static/js/md5.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#login')
                .bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {   //根据验证结果显示的各种图标
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {   // 控件的name属性
                        username: {
                            validators: {
                                notEmpty: {  // 检测非空,radio也可用
                                    message: '请输入用户名'
                                },
                                stringLength: { // 检测长度
                                    message: '用户名必须在5到10位之间',
                                    max: 10,
                                    min: 5
                                }
                            }
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: '请输入密码'
                                },
                                stringLength: {
                                    message: '密码必须在5到10位之间',
                                    max: 10,
                                    min: 5
                                }
                            }
                        }
                    }
                })
                .on('success.form.bv', function(e) {
                    e.preventDefault();  // 阻止表单提交
                    var $form = $(e.target);  // 获取表单对象
                    var bv = $form.data('bootstrapValidator');  // 获取表单验证结果对象
                    // 以下三种方式 拼接表单参数 都可以
                    var params = $form.serialize()  // username=micllo&password=111111
                    {#var params = $form.serializeArray()  // [{name: "username", value: "micllo"}, {name: "password", value: "111111"}]#}
                    {#var params = {username:$('#uname').val().trim(), password:$('#pwd').val().trim()} // {"username":"micllo", "password":"111111"}#}
                    console.log(params)
                    console.log(typeof params)
                    $.post($form.attr('action'), params, function(result) {
                       if(result.code == 200){
                           window.location.href = '/index'
                       }else {
                           alert(result.msg)
                           location.reload();
                       }
                    }, 'json');
                });
        });
    </script>

    <script>
        console.log(hex_md5("123456"));
    </script>
</body>
</html>
